<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>在线学习Java全栈</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
</head>
<style>
    .videoLi{
        height:50px;background: #e4e4e4;margin-bottom:5px;text-align: center;cursor: pointer;clear: both;
    }
    .stageBtn{
        width: 215px; margin: 0 0 2px 0;
    }
    .videoDl{
        float: left;
        height: 50px;
    }
    .videoDl dt{
        width: 50px;height:50px;
    }
    .videoDl dt img{
        width: 100%;height: 100%;
    }
    .videoDl dd{
        clear: both;float: left;padding-left: 60px;word-break: break-all;position: relative;top: -45px;font-size: 12px;
    }
</style>
<body>
<div class="layuimini-container" style="height: 800px">
    <div class="layuimini-main">
        <fieldset class="table-search-fieldset" style="margin-bottom: 2%;">
            <legend>阶段内容</legend>
            <div style="margin: 10px 10px 10px 10px">
                <div class="layui-tab stageList">
                    <ul class="layui-tab-title stageTitle"></ul>
                    <div class="layui-tab-content knContent"></div>
                </div>
            </div>
        </fieldset>
        <div style="float: left; width: 70%;margin-right: 2%;">
            <!--<video id="video" width="600" height="400" controls="controls"></video>-->
            <video id="video" width="100%" height="100%"
                   controls="controls"
                   x-webkit-airplay="true" x5-video-player-fullscreen="true"
                   preload="auto" playsinline="true" webkit-playsinline
                   x5-video-player-typ="h5">
                <source type="application/x-mpegURL">
            </video>
        </div>
        <div style="float: left; width: 28%;overflow-y: auto;height: 484px;">
            <ul id="videoUl">

            </ul>
        </div>
    </div>
</div>

<script src="../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="../js/lay-config.js?v=2.0.0" charset="utf-8"></script>
<script src="../lib/hls.min.js"></script>
<script>
    layui.use(['form', 'table','element', 'jwt'], function () {
        var $ = layui.jquery,
            form = layui.form,
            jwt = layui.jwt,
            element = layui.element,
            table = layui.table,
            currentTime = 0,
            videoSrc,
            videoId;
        const video = document.getElementById('video');
        //设置请求头
        var hls = new Hls({
            xhrSetup : xhr =>{
                xhr.setRequestHeader("token", jwt.getToken());
                xhr.setRequestHeader("currentTime", currentTime);
                xhr.setRequestHeader("videoId", videoId);
            }
        });

        jwt.req({
            url: serviceUrl + '/cloudroomManagement/stage/findStageList',
            type: 'get',
            dataType: 'json',
            success: function (data, textStatus, jqXHR){
                if (data.code == 0) {
                    data.data.map(item=>{
                        $('.stageTitle').append('<li>'+item.chapters+'</li>');
                        var btns = "";
                        item.list.map(item2=>{
                            btns += '<button type="button" class="layui-btn layui-btn-radius layui-btn-primary" value="'+item2.id+'">'+item2.title+'</button>';
                        })
                        $('.knContent').append('<div class="layui-tab-item">'+btns+'</div>');
                    })
                    $('.stageTitle li').eq(0).addClass("layui-this");
                    $('.knContent div').eq(0).addClass("layui-show");
                    element.render();
                }
            },
            error: function(err){
                layer.msg('服务器错误', {icon: 2, time: 1000});
            }
        });

        $(document).on("click",'.knContent div button', function(){
            $('.knContent div button').removeClass("layui-btn-warm");
            $(this).toggleClass("layui-btn-warm");
            jwt.req({
                url: serviceUrl + '/cloudroomManagement/videoFile/findVideoList',
                type: 'get',
                dataType: 'json',
                data:{"knowledgeContentId": $(this).val()},
                success: function (data, textStatus, jqXHR){
                    if (data.code == 0) {
                        $("#videoUl").html('');
                        data.data.map(item=>{
                            $("#videoUl").append('<li class="videoLi">\n' +
                                '                    <dl class="videoDl">\n' +
                                '                        <input class="videoFileId" type="hidden" value="'+item.id+'"/>\n' +
                                '                        <dt><img src="'+serviceUrl+'/video'+item.posterAddr+'"></dt>\n' +
                                '                        <dd>'+item.videoTitle+'</dd>\n' +
                                '                    </dl>\n' +
                                '                    <input class="videoFilePath" type="hidden" value="'+item.videoAddr+'"/>\n' +
                                '                </li>')
                        })
                    }
                },
                error: function(err){
                    layer.msg('服务器错误', {icon: 2, time: 1000});
                }
            });
        })

        $(document).on("click",'.videoDl', function(){
            videoSrc = $(this).parent().find(".videoFilePath").val();
            videoId = $(this).find(".videoFileId").val();
            hls.attachMedia(video);
            hls.loadSource(serviceUrl+"video"+videoSrc);
            hls.on(Hls.Events.ERROR, function (event, data) {
                if (data.fatal) {
                    switch(data.type) {
                        case Hls.ErrorTypes.NETWORK_ERROR:
                            if (data.details === Hls.ErrorDetails.MANIFEST_LOAD_ERROR || data.details === Hls.ErrorDetails.MANIFEST_LOAD_TIMEOUT || data.details === Hls.ErrorDetails.MANIFEST_PARSING_ERROR) {
                                hls.loadSource(serviceUrl+"video"+videoSrc);
                            }
                            else {
                                hls.attachMedia(video);
                                hls.loadSource(serviceUrl+"video"+videoSrc);
                                hls.startLoad()
                            }
                            break;
                        case Hls.ErrorTypes.MEDIA_ERROR:
                            hls.attachMedia(video);
                            hls.loadSource(serviceUrl+"video"+videoSrc);
                            hls.recoverMediaError();
                            break;
                        default:
                            hls.destroy();
                            break;
                    }
                }
            });

        })

        /**
         * 获取视频播放时长
         */
        video.addEventListener('timeupdate', function () {
            currentTime = video.currentTime;
            if(video.currentTime >= 300.9){
                hls.attachMedia(video);
                hls.loadSource(serviceUrl+"video"+videoSrc);
                //示范一个公告层
                layer.open({
                    type: 1
                    ,title: false //不显示标题栏
                    ,closeBtn: false
                    ,area: '300px;'
                    ,shade: 0.8
                    ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
                    ,btn: ['前往充值', '残忍拒绝']
                    ,btnAlign: 'c'
                    ,moveType: 1 //拖拽模式，0或者1
                    ,content: '<br/><br/><br/>亲，您若想继续观看，请付费解锁该资源哟...<br/><br/><br/>'
                    ,success: function(layero){
                        var btn = layero.find('.layui-layer-btn');
                        btn.find('.layui-layer-btn0').attr({
                             href: 'qrcode.html'
                            ,target: '_blank'
                        });
                    }
                });
            }
        }, false)
    });
</script>

</body>
</html>